<template>
	<!-- 搜索 -->
	<div id="search-container">
		<div class="serchIptBtn">
			<input
				type="text"
				placeholder="请输入关键字查询事件"
				class=""
				v-model="input"
				@keyup.enter="
					queryEvent();
					queryClear();
				"
			/>
			<button
				alt=""
				class="searchbox-search"
				@click="
					queryEvent();
					queryClear();
				"
			>
				查询
			</button>
		</div>

		<!--------------------------------------------- 事件表格弹窗 -------------------------------------------------------->
		<el-dialog
			title="关键字查询结果"
			v-el-drag-dialog
			:visible.sync="dialogTableVisible"
			width="60%"
			:modal="false"
			:before-close="handleClose"
			:close-on-click-modal="false"
			center
		>
			<el-table class="table-content" :data="showEventData" border>
				<el-table-column
					prop="eventNum"
					label="事件编号"
					width="150"
				></el-table-column>
				<el-table-column
					prop="eventType"
					label="事件类型"
					width="100"
				></el-table-column>
				<el-table-column label="事件等级" width="100">
					<template slot-scope="scope">
						<p
							:class="{
								Level1: scope.row.eventLevel == 1,
								Level2: scope.row.eventLevel == 2,
								Level3: scope.row.eventLevel == 3,
								Level4: scope.row.eventLevel == 4,
							}"
						>
							{{ scope.row.eventLevel | toEventLevel }}
						</p>
					</template>
				</el-table-column>
				<el-table-column
					prop="eventTime"
					label="发生时间"
					width="150"
				></el-table-column>
				<el-table-column prop="eventPlace" label="发生地点"></el-table-column>
				<el-table-column
					prop="cartNum"
					label="车牌号"
					width="120"
				></el-table-column>
				<el-table-column
					prop="driver"
					label="驾驶员"
					width="120"
				></el-table-column>
				<el-table-column label="处理状态" width="80">
					<template slot-scope="scope">
						<p
							:class="{
								todo: scope.row.sloveState == 0,
								doing: scope.row.sloveState == 1,
								done: scope.row.sloveState == 2,
							}"
						>
							{{ scope.row.sloveState | toEventSlove }}
						</p>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页器 -->
			<div class="page-box">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="this.page"
					:page-sizes="[3, 5, 10]"
					:page-size="100"
					layout="total, sizes, prev, pager, next, jumper"
					:total="this.total"
				></el-pagination>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { Query } from '../../../utils/queryPoint.js';
import { mapState } from 'vuex';
import elDragDialog from '../../directive/el-dragDialog'; //导入自定义弹窗拖拽
var eventSource = new ol.source.Vector({
	wrapX: false,
});

var layerEvent = new ol.layer.Vector({
	source: eventSource,
	style: new ol.style.Style({
		image: new ol.style.Icon({
			anchor: [0.5, -2],
			anchorOrigin: 'bottom-right',
			anchorXUnits: 'fraction',
			anchorYUnits: 'pixels',
			offsetOrigin: 'top-right',
			// offset:[0,10],
			//图标缩放比例
			scale: 1,
			//透明度
			opacity: 1,
			//图标的url
			src: '../../../../src/assets/img/accident.png',
		}),
	}),
});

export default {
	directives: {
		// 自定义拖拽弹窗配置
		elDragDialog,
	},
	name: 'search',
	data() {
		return {
			usertype: '',
			input: '',
			eventData: [], //查询到的所有事件数据
			showEventData: [], //显示在表格的事件数据
			dialogTableVisible: false, //控制事件查询弹窗
			total: 0, //事件总条数
			page: 1, //当前页码数
			size: 3, //每页显示数
			activeNames: '1',
		};
	},

	filters: {
		// 用过滤器将事故等级从代号解译成文字
		toEventLevel: (value) => {
			if (value == 1) {
				value = '轻微事故';
			} else if (value == 2) {
				value = '一般事故';
			} else if (value == 3) {
				value = '重大事故';
			} else {
				value = '特大事故';
			}
			return value;
		},
		// 用过滤器将事故处理情况从代号解译成文字
		toEventSlove: (value) => {
			if (value == 0) {
				value = '待处理';
			} else if (value == 1) {
				value = '未处理';
			} else if (value == 2) {
				value = '已归档';
			}
			return value;
			console.log(value);
		},
	},
	watch: {},
	computed: {
		// 批量从vuex中获取数据
		...mapState(['map', 'docLayer']),
	},

	methods: {
		queryEvent() {
			var MyService = 'guanggu';
			//创建图层对象, 将数据源添加到图层图像
			var eventLayer = new ol.layer.Vector({
				source: eventSource,
			});
			var map = this.$store.state.map;
			map.addLayer(eventLayer);
			// map.on('click', addPopup);
			//判断当前事件图层是否有要素数据
			if ((eventSource.revision_ = 0)) {
				eventSource.clear();
			}
			//获取关键字
			const keywords = this.input;
			if (!keywords) {
				this.$message.warning('输入不能为空，请重新输入');
				return;
			}
			//新建查询
			const query_sql = new Query({
				service: MyService,
				layerID: '2',
				host: 'localhost',
				port: 6163,
			});
			const sql = `事件类型 LIKE '%${keywords}%' OR 发生地点 LIKE '%${keywords}%' OR 处理状态 LIKE '${keywords}'`;
			console.log(sql);
			var _this = this;
			query_sql.queryBySQL(sql, (result) => {
				if (result.TotalCount == 0)
					return this.$message.warning('没有查询到相应的数据');
				//初始化Zondy.Format.PolygonJSON类
				var format = new Zondy.Format.PolygonJSON();
				//将MapGIS要素JSON反序列化为ol.Feature类型数组
				var features = format.read(result);
				eventSource.addFeatures(features);
				/* 将查询到的要素标注显示， */

				this.map.addLayer(layerEvent);

				console.log('查询到的数据', features);
				const data = result.SFEleArray;
				console.log(data);

				// 查询到的总个数
				this.total = features.length;
				features.forEach((item) => {
					// 遍历获取事件，数组格式化处理
					this.eventData.push({
						eventNum: item.values_.values_.事件编号,
						eventType: item.values_.values_.事件类型,
						eventLevel: item.values_.values_.事件等级,
						eventTime: item.values_.values_.发生时间,
						eventPlace: item.values_.values_.发生地点,
						cartNum: item.values_.values_.车牌号,
						driver: item.values_.values_.驾驶员,
						sloveState: item.values_.values_.处理状态,
					});
				});
				//打开弹窗
				this.dialogTableVisible = true;
				this.showTableState = true; //显示事件查询表格

				// 初始显示
				let start = (this.page - 1) * this.size;
				let end = (this.page - 1) * this.size + this.size;
				this.showEventData = this.eventData.slice(start, end);
			});
		},
		//清除input
		queryClear() {
			eventSource.clear();
			this.input = '';
		},
		// 关闭查询
		handleClose() {
			this.dialogTableVisible = false; //关闭弹窗
			this.eventData = []; //查询数据清空
			this.isChosen = false; //关闭菜单
			this.map.removeLayer(layerEvent); //移除查询标注图层
		},
		// ------------------------------------分页相关方法-----------------------------------------
		// 改变每页显示数目
		handleSizeChange(val) {
			this.size = val;
			const start = (this.page - 1) * this.size; //起始下标（包含）
			const end = (this.page - 1) * this.size + this.size; //结束下标（不包含）
			this.showEventData = this.eventData.slice(start, end);
		},
		// 翻页
		handleCurrentChange(val) {
			this.page = val;
			const start = (this.page - 1) * this.size; //起始下标（包含）
			const end = (this.page - 1) * this.size + this.size; //结束下标（不包含）
			this.showEventData = this.eventData.slice(start, end);
		},
	},
};
</script>

<style scoped>
#search-container {
	height: 100%;
	width: 20%;
	min-width: 220px;
	background-color: transparent;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
.serchIptBtn input {
	width: 200px;
	height: 35px;
	padding: 0 10px;
	border: none;
	outline: none;
	border: 1px solid rgb(206, 193, 193);
	border-radius: 5px 0 0 5px;
	box-sizing: border-box;
}
.serchIptBtn button {
	position: relative;
	top: 1px;
	left: 0;
	margin: 0;
	padding: 0;
	width: 50px;
	height: 35px;
	background: rgb(255, 255, 255);
	outline: none;
	border: 1px solid rgb(206, 193, 193);
}

/* 查看事件状态样式 */
.todo {
	padding: 0 5px;
	text-align: center;
	background: rgb(170, 14, 14);
	color: white;
}
.doing {
	padding: 0 5px;
	text-align: center;
	background: rgb(201, 137, 20);
	color: white;
}
.done {
	padding: 0 5px;
	text-align: center;
	background: rgb(16, 48, 155);
	color: white;
}
/* 查看事件等级样式 */
.Level1 {
	padding: 0 5px;
	text-align: center;
	color: green;
	font-weight: 600px;
	border: 2px solid green;
}
.Level2 {
	padding: 0 5px;
	text-align: center;
	color: rgb(21, 141, 189);
	font-weight: 600px;
	border: 2px solid rgb(21, 141, 189);
}
.Level3 {
	padding: 0 5px;
	text-align: center;
	color: blue;
	font-weight: 600px;
	border: 2px solid blue;
}
.Level4 {
	padding: 0 5px;
	text-align: center;
	color: red;
	font-weight: 600px;
	border: 2px solid red;
}
</style>
